<template>
	<view>
		<scroll-view scroll-y :refresher-enabled="refresherEnabled" @refresherrefresh="shuaxinXiala" @scrolltolower="scrolltolower" :scroll-top="scrollTop"
		:refresher-triggered="triggered"
			:style="{height:'calc(100vh - ' + height + 'rpx - env(safe-area-inset-bottom))'}">
			<slot name="title" :dataList="dataList" :searchData="searchData"></slot>
			<view v-if="loadMoreStatus != 'loading' && dataList.length == 0">
				<slot name="empty" :dataList="dataList">
					<view class="text-center">
						<image src="/static/empty/empty.png" style="filter: grayscale(100%);width: 400rpx;" mode="widthFix" class="mt-3"></image>
						<view class="mt-3 text-c4">暂无数据</view>
					</view>
				</slot>
			</view>
			<view v-else>
				<slot :dataList="dataList" :searchData="searchData"></slot>
				<uni-load-more :status="loadMoreStatus"></uni-load-more>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "gz-page",
		props: {
			api: {
				type: String,
				required: true,
				default: "",
			},
			height: {
				default: 124,
				type: Number,
				required: true
			},
			refresherEnabled:{
				default:false
			}
		},
		data() {
			return {
				searchData: {
					current: 1,
					size: 30,
				},
				loadMoreStatus: '',
				scrollTop: 0,
				isShuaxin: false,
				dataList: [],
				apiMethod: "",
				triggered:false,
				config:{
					api:"",
					params:{},
					test:{
						isTest:false,
						list:[],
						filter:null,
					},
					success:null,
					fail:null
				}
			};
		},
		mounted() {},
		methods: {
			scrolltolower() {
				this.findAllByPage()
			},
			shuaxin(config) {
				this.config = config
				let api = (config && config.api)?config.api:""
				let params = (config && config.params)?config.params:{}
				let testData = (config && config.test)?config.test:{}
				//将参数添加到search
				for (let key in params) {
					if (config[key]) {
						this.searchData[key] = config[key]
					}
				}
				if (api) {
					this.apiMethod = api
				} else {
					this.apiMethod = this.api
				}
				if (testData.isTest == true) {
					this.dataList = testData.list
					if (testData.filter) {
						this.dataList = this.dataList.filter(testData.filter)
					}
					this.loadMoreStatus = 'noMore'
				} else {
					this.isShuaxin = true
					this.searchData.current = 1
					this.searchData.size = 30
					this.loadMoreStatus = ""
					this.findAllByPage()
				}
			},
			shuaxinXiala(){
				if(this.refresherEnabled){
					this.triggered = true
				}
				this.isShuaxin = true
				this.searchData.current = 1
				this.searchData.size = 30
				this.loadMoreStatus = ""
				this.findAllByPage()
			},
			findAllByPage() {
				if (!this.apiMethod) {
					console.error("api为空")
					return
				}

				let apiMethod = uni.$api[this.apiMethod]
				if (!apiMethod) {
					console.error("apiMethod为空")
					return
				}

				if (this.loadMoreStatus != '' && this.loadMoreStatus != "more") {
					return
				}
				this.loadMoreStatus = 'loading'

				apiMethod(this.searchData).then((data) => {
					this.searchData.current++
					this.loadMoreStatus = 'more'

					if (this.isShuaxin === true) {
						this.dataList = []
						this.scrollTop = this.scrollTop == 0 ? 1 : 0

						this.isShuaxin = false
					}

					let list = data.records
					list.forEach(item => {
						this.dataList.push(item)
					})
					if (this.dataList.length >= data.total) {
						this.loadMoreStatus = 'noMore'
					}
					if(this.refresherEnabled){
						this.triggered = false
					}
					if(this.config.success){
						this.config.success({
							dataList:this.dataList,
							dataLength:this.dataList.length,
							isFinished: data.total == this.dataList.length,
							total:data.total
						})
					}
				}).catch(err=>{
					this.searchData.current--
					this.loadMoreStatus = 'more'
				})
			},
			delByIndex(index) {
				this.dataList.splice(index, 1)
			},
			getByIndex(index) {
				return this.dataList[index]
			},
			updateByIndex(index, item) {
				this.dataList.splice(index, 1, item)
			},
			getDataList(){
				return this.dataList
			},
			getDataLength(){
				if(!this.dataList){
					return 0
				}
				return this.dataList.length
			}
		}
	}
</script>

<style>
</style>